import React from "react";
import {LdhFieldSet} from "@biz/PageCompnents";
import {
    LdhFormItem,
    LdhBooleanSelect,
    LdhInput,
    LdhMapSelect,
    LdhFormItemTip,
    LdhUpload,
    LdhButton, Message
} from "@biz/Components";
import BaseDetailPage from "@biz/BaseDetailPage";
import {createAction} from "../Action";
import Config from "../config";
import Store from "../Store";
import LdhEditor,{buildHtml} from "@biz/Editor";
import BraftEditor from "braft-editor";
import GUtils from "@/utils";

import "../style.less"
const prefix = "document-detail";
export default class DocumentDetail extends BaseDetailPage {

    constructor(props) {
        super(props);
        this.action = createAction();
        this.config = Config(this.action);
        this.store = new Store(props, this.config, this.action);
        this.className = prefix;
        this.state = {content:BraftEditor.createEditorState("")}
    }
    onGetDetailCompleted(detail){
        detail.type = detail.type +"";
        let {type ,fileId, filepath, url} = detail;
        let filename = filepath.slice(filepath.lastIndexOf("/")+1);
        let defaultFileList = [{uid:fileId, url, name:filename}];
        detail.filename = filename;
        detail._file = url;
        this.setState({content:BraftEditor.createEditorState(detail.content), type, defaultFileList})
    }
    onContentChange(v){
        this.setState({content:v})
    }

    onSubmit(values) {
        let {detailStatus, detail, content, type} = this.state;
        let {id  ,fileId, filepath, url} = detail;

        let vo = {id,type,fileId, filepath, url, ...values};
        switch (type) {
            case "1":
            case "2":
            case "10":
                vo.content =' <meta charset="UTF-8"/>\r\n'+buildHtml(content);
                break;
            case "5":
                break;
        }
        this.action[detailStatus](vo);
    }

    handleTypeChange(type){
        this.setState({type});
    }

    renderDetail(isDetail) {
        let {loading, content,detail, type, detailStatus} = this.state
        let isCreate = detailStatus == "create";
        return <div className={prefix}>
            <LdhFieldSet title="基本信息" btn={!isDetail} loading={loading}>
                <LdhFormItem label="类型" name="type" required >
                    <LdhMapSelect type="DocType" isDetail={!isCreate} onChange={this.handleTypeChange.bind(this)}/>
                </LdhFormItem>
                <LdhFormItemTip>{GUtils.dealEnumValue(type,"DocTypeTip")||"不同类型对应不同的使用场景"}</LdhFormItemTip>
                <LdhFormItem label="标题" name="title" required isDetail={isDetail}>
                    <LdhInput maxLength={60} showCount/>
                </LdhFormItem>

                <LdhFormItem label="状态" name="enabled" required >
                    <LdhBooleanSelect  type="Enabled" isDetail={isDetail}/>
                </LdhFormItem>

            </LdhFieldSet>
            {
                this.renderContent(type, isDetail, content)
            }
        </div>


    }

    handleUploadChange(v){
        let rsp = v.file.response;
        if(!rsp) return;
        if(rsp.success){
            let {id,url,filepath} = rsp.vo;
            let {detail} = this.state;

            detail.fileId= id;
            detail.url = url;
            detail.filepath = filepath;
            this.action.setNewState({detail})
        }else{
            Message.warning(rsp.errMsg);
        }
    }

    renderContent(type, isDetail, content){
        let {detail, defaultFileList=[]} = this.state;
        type = type + "";
        switch (type) {
            case "1":
            case "2":
            case "10":
                return   isDetail
                    ? <iframe src={detail.url+"?_="+new Date().getTime()} frameborder="0"></iframe>
                    /* <div className="content" dangerouslySetInnerHTML={{__html:detail.content}}></div>*/
                    : <LdhEditor onChange={this.onContentChange.bind(this)} value={content}/>
            case "5":
                return isDetail ?    <LdhFormItem label="文件" name="file" required>
                        <a href={detail.url}>{detail.filename}</a>
                </LdhFormItem>
                    : <LdhFormItem label="文件" name="_file" required >
                        <LdhUpload action={GUtils.uploadDocumentFile} maxCount={1}
                                   defaultFileList = {defaultFileList}
                                   onChange={this.handleUploadChange.bind(this)}>
                            <LdhButton type="primary" className="upload-btn">点击上传 </LdhButton>
                            <span className="tip">只能上传 jpg/png/gif/docx/pdf 文件，且不超过 15MB</span>
                        </LdhUpload>
                    </LdhFormItem>
        }
    }
}